<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet"  th:href="@{/css/file.css}" />
    <link rel="stylesheet"  th:href="@{/css/bootstrap.css}" />
    <link th:href="@{/css/semantic.min.css}" rel="stylesheet">
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap-paginator.js}"></script>
    <script th:src="@{/js/semantic.min.js}"></script>

    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<!--    弹出框删除-->
<div class="ui basic modal" id="deletemodal">
    <h2 class="header">
        删除课程
    </h2>
    <div class="content">
        删除课程
    </div>
    <form th:action="@{/tea/center/coursetopic/delete}" method="post">
        <input type="hidden" id="getid" name="id">
        <div class="actions">
            <button class="ui negative button" type="button">否</button>
            <button class="ui positive button" type="submit">是</button>
        </div>
    </form>
</div>
<!--    弹出框删除-->

<!--    弹出框更新-->
<div class="ui  modal" id="updatemodal">
    <h2 class="header">
        更新课程
    </h2>
    <div class="content">
    <div>
        <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;" method="post" enctype="multipart/form-data" th:action="@{/tea/center/coursetopic/update}">
            <div class="layui-form-item">
<!--                课程主键id-->
                <input type="hidden" name="id" id="main_id">
<!--                课程主键id-->
                <label class="layui-form-label">课程名</label>
                <div class="layui-input-inline">
                    <input type="text" name="course_name" id="course_name" placeholder="请填写课程名称" class="layui-input" lay-verify="required" required />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图片</label>
                <div class="layui-input-inline">
                    <a href="javascript:;" class="file">请上传课程图片
                        <input type="file" name="course_image" required lay-verify="required|image" autocomplete="off" id="course_image">
                    </a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">视频</label>
                <div class="layui-input-inline">
                    <a href="javascript:;" class="file">请上传课程视频
                        <input type="file" name="course_video" required lay-verify="required|video" autocomplete="off" id="user-image">
                    </a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-inline">
                    <select name="coursetype_id" lay-verify="required" >
                        <option value=""></option>
                        <option  th:each="coursetype:${coursetypes}"  th:value="${coursetype.getId()}" th:text="${coursetype.getCourse_name()}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit  type="submit"   id="buttonsubmit" data-title="上传后请耐心等待，页面会自动跳转">
                        确认上传
                    </button>
                </div>
            </div>
        </form>
    </div>
    </div>
</div>
<!--    弹出框更新-->

<!--管理界面-->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
<!--                搜索框-->
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5" id="formpage" th:action="@{/tea/center/coursetopic/list}">
                        <div class="layui-inline layui-show-xs-block">
<!--                            保存当前有多少页-->
                            <input type="hidden" th:value="${pageinfo.pageNum}" id="page" name="page">
                            <input type="text" name="course_name"  placeholder="请输入课程名" autocomplete="off" th:value="${course_name}" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn"  lay-submit type="submit"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
<!--                搜索框-->

<!--                列表-->
                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th>课程名称</th>
                            <th>封面图片</th>
                            <th>课程视频</th>
                            <th>发布时间</th>
                            <th>课程类型</th>
                            <th>点赞数</th>
                            <th>操作</th>
                            <th>操作</th>
                        </thead>
                        <tbody>
                        <tr th:each="topic:${pageinfo.list}">
                            <td th:text="${topic.getCourse_name()}"></td>
                            <td >
                                <img  th:src="@{'https://wk2020.oss-cn-shenzhen.aliyuncs.com/'+${topic.getCourse_image()}}">
                            </td>
                            <td ><button class="ui orange button" th:value="${topic.getCourse_video()}" id="playvideo">观看视频</button></td>
                            <td th:text="${#dates.format(topic.getCreatetime(),'yyyy-MM-dd')}"></td>
                            <td th:if="${type.getId()==topic.getCoursetype_id()}" th:each="type:${coursetypes}" th:text="${type.getCourse_name()}"></td>
                            <td th:text="${topic.getPraise()}"></td>
                            <td>
                                <button class="ui primary button" th:onclick="|getinformation(${topic.getId()})|">修改</button>
                            </td>
                            <td>
                                <button class="ui button" th:onclick="|deleteid(${topic.getId()})|">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <!--使用bootstrop-paginot实现分页-->
                    <ul id="pagination"></ul>
                </div>
<!--                列表-->
            </div>
        </div>
    </div>
</div>
<!--管理界面-->
</body>

<script>
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var form = layui.form;




        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

        //提示+观看视频
        $(document).ready(function () {
            $('#buttonsubmit').popup();
            $('#buttonsubmit').click(function () {
                $(this).removeClass("layui-btn");
                $(this).addClass("ui loading button");
                var ii = layer.load();
            });

            $('.ui.orange.button').click(function () {
                    var video=$(this).val();
                    console.log(video);
                layer.open({
                    type: 2,
                    title: '我的视频',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area : ['800px' , '520px'],
                    content:  '/tea/center/mycourse_video?video=' + video
                });
            });

        });
        //提示+观看视频
    });



    layui.use('form', function() {
        var form = layui.form;

        //进行表单验证
        layui.use('form', function() {
            var form = layui.form;
            //各种基于事件的操作，下面会有进一步介绍
            form.verify({
                image: function (value, item) {
                    if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(value)) {
                        return '图片格式错误';
                    }
                },
                video:function (value,item) {
                    if (!/\.(mp4)$/.test(value)) {
                        return '视频格式错误';
                    }
                }
            })
        });
        //进行表单验证
    });

    //进行修改操作
    function getinformation(id) {
        console.log(id);
        $.post(
            '/tea/center/coursetopic/getinformation',
            {'id':id},
            //获取信息
            function (result) {
                $('#course_name').val(result.data.course_name);
                $('#main_id').val(result.data.id)

            }
        );
        $('#updatemodal')
            .modal('show');
    }

    //进行删除操作
    function deleteid(id) {
        console.log(id);
        $('#getid').val(id);
        $('#deletemodal')
            .modal({
                blurring:true,
                onApprove:function () {
                    console.log('确认')
                },
                onDeny:function () {
                    console.log('拒绝')
                }
            })
            .modal('show');
    }

    //分页
    $(function () {
        $('#pagination').bootstrapPaginator({
            bootstrapMajorVersion: 3,
            currentPage:[[${pageinfo.PageNum}]],
            totalPages:[[${pageinfo.Pages}]],
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            //重新提交，不会因为点击而忽略了查找值
            onPageClicked:function (event,originalEvent,type,page) {
                $('#page').val(page);
                $('#formpage').submit();
            }
            // pageUrl: function (type, page, current) {
            //     return '/stu/center/coursetopic/list?page=' + page ;
            // }
        })
    });

    /*用户-停用*/
    function member_stop(obj,id){
        layer.confirm('确认要停用吗？',function(index){

            if($(obj).attr('title')=='启用'){

                //发异步把用户状态进行更改
                $(obj).attr('title','停用')
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!',{icon: 5,time:1000});

            }else{
                $(obj).attr('title','启用')
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!',{icon: 5,time:1000});
            }

        });
    }

    /*用户-删除*/
    function member_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!',{icon:1,time:1000});
        });
    }



    function delAll (argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要删除吗？'+data,function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
    }


</script>
</html>